<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
<!--  <link rel="stylesheet" href="stylesheets/reset.css">-->
  <link rel="stylesheet" href="stylesheets/index.css">
  <style>
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
  </style>
</head>
<body>

<div id="app">
<!--  <h1 class="red">{{ msg }}</h1>-->
  <h1
    v-bind:class="cName"
    v-bind:title="msg"
  >
    {{ msg }}
  </h1>
  <hr>
  <h1 v-if="seen">现在你看到我了</h1>
<!--  <button @click="toggle">切换显示</button>-->
  <button v-on:click="toggle">切换显示</button>
  <hr>
  <input v-model="text" type="text">
  <button @click="handleSubmit">submit</button>
<!--  <h2>{{ text }}</h2>-->
  <ul>
<!--    <li v-for="item in todos">-->
<!--    <li v-for="item of todos">-->
<!--    <li v-for="(item, index) of todos">{{ index + 1 }}. {{ item.text }}</li>-->
    <todo-item
      v-for="(item, index) in todos"
      v-bind:key="index"
      v-bind:text="item.text"
      v-bind:index="index + 1"
      v-bind:zan="item.zan"
    ></todo-item>
  </ul>
</div>

<script src="js/vue.js"></script>
<script>

  Vue.component('todo-item', {
    template: `
      <li>
        {{index}}. {{ text }}
        <em v-if="zan === 0">暂无点赞</em>
        <b v-else>{{ zan }}</b>
        <button v-on:click="dianzan">
          {{ isZan ? '已点赞' : '点赞' }}
        </button>
      </li>
    `,
    props: ['text', 'index', 'zan'],
    data() {
      return {
        isZan: false
      }
    },
    methods: {
      dianzan() {
        if (!this.isZan) {
          this.zan++
          this.isZan = true
        } else {
          this.zan--
          this.isZan = false
        }
        console.log(this.zan)
      }
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      msg: 'Hello Vue!!!',
      cName: 'red',
      seen: true,
      text: '',
      todos: [
        { text: '学习 JavaScript', zan: 21 },
        { text: '学习 Vue', zan: 23 },
        { text: '整个牛项目', zan: 1 },
        { text: '学习 JavaScript', zan: 99 },
        { text: '学习 Vue', zan: 2 },
        { text: '整个牛项目', zan: 0 }
      ]
    },
    methods: {
      handleSubmit() {
        if (this.text.length === 0) {
          alert()
        } else {
          this.todos.push({
            text: this.text
          })
          // console.log(this.text)
          this.text = ''
        }
      },
      toggle () {
        // this.seen = !this.seen
        this.msg = this.msg.split('').reverse().join('')
        // console.log(this.seen)
      }
    }
  })


</script>
</body>
</html>
